<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="/WEB-INF/tag/localeTag.tld" prefix="t"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; UTF-8">
<title>Q & A</title>
<link rel="shortcut icon" href="resources/images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="resources/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="resources/css/style.css" />
<script type="text/javascript" src="resources/js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="resources/js/bootstrap.js"></script>
<!-- <script type="text/javascript" src="resources/js/subscribeCategory.js"></script> -->
<script type="text/javascript" src="resources/js/qanda.js"></script>
</head>
<body>
	<jsp:include page="parts/header.jsp"></jsp:include>
	<jsp:include page="parts/navigation.jsp"></jsp:include>
	<div class="content">
		<jsp:include page="parts/leftmenu.jsp"></jsp:include>
		<div class="page">
			<h2>
				<t:locale mName="manageCategory.subscribe" />
			</h2>
			<form class="form-horizontal" method="POST" action="manageCategory">
				<div class="form-group">
					<div class="col-xs-12">
						<button type="button" class="btn btn-info" onclick="addCategoryBoxShow()">
							<span class="glyphicon glyphicon-plus"> </span>
							<t:locale mName="manageCategory.addCategory" />
						</button>
						<button type="button" class="btn btn-danger" onclick="removeCategoryBoxShow()">
							<span class="glyphicon glyphicon-remove"> </span>
							<t:locale mName="manageCategory.removeCategory" />
						</button>
						<button type="submit" class="btn btn-success">
							<span class="glyphicon glyphicon-ok"> </span>
							<t:locale mName="manageCategory.submit" />
						</button>
					</div>
				</div>
				<div id="removeCategoryBox">
					<div class="form-group">
						<div class="col-xs-8">
							<h2>
								<t:locale mName="manageCategory.chooseCategories" />
							</h2>
						</div>
						<div class="col-xs-4 text-right">
							<span onclick="removeCategoryBoxClose()" class="glyphicon glyphicon-remove"></span>
						</div>
					</div>
					<div id="content-removeCategoryBox">
						<div class="form-group">
							<div class="col-xs-12">
								<c:forEach items="${usersCategories}" var="categ">
									<div class="btn-block">
										<div class="btn-group" data-toggle="buttons">
											<label class="btn btn-danger">
												<input type="checkbox" name="removeCategory" value="${categ.id}">
												<span class="glyphicon glyphicon-remove"></span>
												${categ.name}
											</label>
										</div>
									</div>
								</c:forEach>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-xs-12">
							<input type="button" class="btn btn-info btn-lg" value="<t:locale mName="manageCategory.ok"/>" onclick="removeCategoryBoxClose()">
						</div>
					</div>
				</div>
				<div id="addCategoryBox">
					<div class="form-group">
						<div class="col-xs-8">
							<h2>
								<t:locale mName="manageCategory.chooseCategories" />
							</h2>
						</div>
						<div class="col-xs-4 text-right">
							<span onclick="addCategoryBoxClose()" class="glyphicon glyphicon-remove"></span>
						</div>
					</div>
					<div id="content-addCategoryBox">
						<div class="form-group">
							<div class="col-xs-12">
								<c:forEach items="${nonSelectCategories}" var="categ">
									<div class="btn-block">
										<div class="btn-group" data-toggle="buttons">
											<label class="btn btn-success">
												<input type="checkbox" name="addCategory" value="${categ.id}">
												<span class="glyphicon glyphicon-plus"></span>
												${categ.name}
											</label>
										</div>
									</div>
								</c:forEach>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-xs-12">
							<input type="button" class="btn btn-info btn-lg" value="<t:locale mName="manageCategory.ok"/>" onclick="addCategoryBoxClose()">
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
	<jsp:include page="parts/footer.jsp"></jsp:include>
</body>
</html>